<template>
	<view class="memoryHall_list">
		<view class="memoryHall_item" v-for="(item, index) in props.list">
			<image
				class="memoryHall_item_medal"
				:src="
					item.memorialPeopleNubmer == 2
						? 'http://112.124.50.179:8888/imgs/home/medal_vip.png'
						: 'http://112.124.50.179:8888/imgs/home/medal_ordinary.png'
				"
				mode=""
			></image>
			<view v-if="item.memorialPeopleNubmer == 2" class="memoryHall_bgc_vip">
				<image class="memoryHall_bgc_vip1" :src="item.picture[0]" mode=""></image>
				<image class="memoryHall_bgc_vip2" :src="item.picture[1]" mode=""></image>
			</view>
			<image v-else class="memoryHall_bgc" :src="item.picture[0]" mode=""></image>
			<view>
				<view v-if="item.memorialPeopleNubmer == 2" class="memoryHall_name_vip">
					{{ item.name[0] }}
				</view>
				<view
					v-if="item.memorialPeopleNubmer == 2"
					class="memoryHall_name_vip"
					style="margin-top: 4rpx"
				>
					{{ item.name[1] }}
				</view>
				<view v-else class="memoryHall_name">{{ item.name[0] }}</view>
				<view
					class="memoryHall_func"
					:style="{ marginTop: item.memorialPeopleNubmer == 2 ? '12rpx' : '16rpx' }"
				>
					<image
						:src="
							item.memorialPeopleNubmer == 2
								? 'http://112.124.50.179:8888/imgs/mine/candle_vip.png'
								: 'http://112.124.50.179:8888/imgs/mine/candle.png'
						"
						mode=""
					></image>
					<view style="margin-right: 32rpx">{{ item.candleLightUp }}</view>
					<image
						:src="
							item.memorialPeopleNubmer == 2
								? 'http://112.124.50.179:8888/imgs/mine/eye_vip.png'
								: 'http://112.124.50.179:8888/imgs/mine/eye.png'
						"
						mode=""
					></image>
					<view>{{ item.lookNumber }}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { onLoad } from '@dcloudio/uni-app';
import { ref, reactive } from 'vue';
onLoad(() => {});
const props = defineProps({
	list: {
		type: Array,
		required: true,
		default: []
	}
});
</script>

<style lang="scss">
.memoryHall_list {
	width: 100%;
	overflow-x: scroll;
	display: flex;
	align-items: center;

	.memoryHall_item {
		width: 324rpx;
		height: 160rpx;
		background: #ececec;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		margin-right: 24rpx;
		flex-shrink: 0;
		display: flex;
		position: relative;

		.memoryHall_item_medal {
			position: absolute;
			width: 42rpx;
			height: 42rpx;
			right: 0;
			top: 0;
		}

		.memoryHall_bgc {
			width: 120rpx;
			height: 160rpx;
			border-radius: 8rpx;
			margin-right: 24rpx;
		}

		.memoryHall_bgc_vip {
			position: relative;
			width: 120rpx;
			height: 160rpx;
			margin-right: 24rpx;

			.memoryHall_bgc_vip1 {
				position: absolute;
				left: 8rpx;
				top: 8rpx;
				width: 66rpx;
				height: 88rpx;
				z-index: 2;
			}

			.memoryHall_bgc_vip2 {
				position: absolute;
				left: 54rpx;
				top: 64rpx;
				width: 66rpx;
				height: 88rpx;
			}
		}

		.memoryHall_name {
			margin-top: 33rpx;
			font-weight: 500;
			font-size: 28rpx;
			color: #524630;
			line-height: 40rpx;
		}

		.memoryHall_name_vip {
			margin-top: 20rpx;
			font-weight: 500;
			font-size: 26rpx;
			color: #956b00;
			line-height: 36rpx;
		}

		.memoryHall_func {
			display: flex;
			align-items: center;
			font-weight: 400;
			font-size: 18rpx;
			color: #524630;
			line-height: 21rpx;
			image {
				width: 32rpx;
				height: 32rpx;
				margin-right: 8rpx;
			}
		}
	}
}
</style>
